/**
 * The definition of the Map.
 */
var mapmatrix = [
        [[0, 0, 0, 0, 0, 0, 0, 0],
            [0, 0, 0, 0, 0, 0, 0, 0],
            [0, 0, 0, 0, 0, 0, 0, 0],
            [0, 0, 0, 1, 1, 1, 0, 0],
            [0, 0, 2, 1, 0, 3, 0, 0],
            [0, 0, 0, 0, 0, 0, 0, 0],
            [0, 0, 0, 0, 0, 0, 0, 0],
            [0, 0, 0, 0, 0, 0, 0, 0]]
    ][0];

/*
        The definition of the direction.
        North:0
        East:1
        South:2
        West:3
*/
var dir = 1;

//The initial index x and y of the bird.
var init_x = 0;
var init_y = 0;

var ROWS = mapmatrix.length;
var COLS = mapmatrix[0].length;
var tileID = 0;

var xmlns = "http://www.w3.org/2000/svg";
var svg = document.getElementById('svgMaze');

var drawMap = function() {
        var bg = document.createElementNS(xmlns, 'clipPath');
        bg.setAttribute('id', 'bgPath');
        var clipRect = document.createElementNS(xmlns, 'rect');
        clipRect.setAttribute('id', 'clipRect');
        clipRect.setAttribute('width', 400);
        clipRect.setAttribute('height', 400);
        bg.appendChild(clipRect);
        svg.appendChild(bg);

        var bgImage = document.createElementNS(xmlns, 'image');
        bgImage.setAttribute('id','background');
        bgImage.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href',
                '../res2/background.png');
        bgImage.setAttribute('height', 400);
        bgImage.setAttribute('width', 400);
        bgImage.setAttribute('clip-path', 'url(#bgPath)');
        svg.appendChild(bgImage);

        for(var y = 0; y < ROWS; y++) {
                for (var x = 0; x < COLS; x++) {
                        if (mapmatrix[y][x] === 0) {
                                var brickClip = document.createElementNS(xmlns, 'clipPath');
                                brickClip.setAttribute('id', 'brickPath'+tileID);
                                var brickClipRect = document.createElementNS(xmlns, 'rect');
                                brickClipRect.setAttribute('width', 50);
                                brickClipRect.setAttribute('height', 50);
                                brickClipRect.setAttribute('x', x * 50);
                                brickClipRect.setAttribute('y', y * 50);
                                brickClip.appendChild(brickClipRect);
                                svg.appendChild(brickClip);

                                var brickImage = document.createElementNS(xmlns, 'image');
                                brickImage.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href',
                                        '../res2/brick.png');
                                brickImage.setAttribute('height', 50);
                                brickImage.setAttribute('width', 50);
                                brickImage.setAttribute('clip-path', 'url(#brickPath'+ tileID + ')');
                                brickImage.setAttribute('x', x * 50);
                                brickImage.setAttribute('y', y * 50);
                                svg.appendChild(brickImage);
                                tileID++;
                        } else if (mapmatrix[y][x] === 2) {
                                init_x = x;
                                init_y = y;
                                var  bird = document.createElementNS(xmlns, 'clipPath');
                                bird.setAttribute('id', 'birdPath');
                                var clipRect = document.createElementNS(xmlns, 'rect');
                                clipRect.setAttribute('id', 'clipRect');
                                clipRect.setAttribute('width', 50);
                                clipRect.setAttribute('height', 50);
                                clipRect.setAttribute('x', x*50);
                                clipRect.setAttribute('y', y*50);
                                bird.appendChild(clipRect);
                                svg.appendChild(bird);

                                var birdImage = document.createElementNS(xmlns, 'image');
                                birdImage.setAttribute('id','bird');
                                birdImage.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href',
                                        '../res2/bird.png');
                                birdImage.setAttribute('height', 50);
                                birdImage.setAttribute('width', 50);
                                birdImage.setAttribute('x', x*50);
                                birdImage.setAttribute('y', y*50);
                                birdImage.setAttribute('clip-path', 'url(#birdPath)');
                                svg.appendChild(birdImage);
                        } else if (mapmatrix[y][x] === 3) {
                                var  des = document.createElementNS(xmlns, 'clipPath');
                                des.setAttribute('id', 'desPath');
                                var clipRect = document.createElementNS(xmlns, 'rect');
                                clipRect.setAttribute('width', 50);
                                clipRect.setAttribute('height', 50);
                                clipRect.setAttribute('x', x*50);
                                clipRect.setAttribute('y', y*50);
                                des.appendChild(clipRect);
                                svg.appendChild(des);

                                var desImage = document.createElementNS(xmlns, 'image');
                                desImage.setAttribute('id','des');
                                desImage.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href',
                                        '../res2/pig.png');
                                desImage.setAttribute('height', 50);
                                desImage.setAttribute('width', 50);
                                desImage.setAttribute('x', x*50);
                                desImage.setAttribute('y', y*50);
                                desImage.setAttribute('clip-path', 'url(#desPath)');
                                svg.appendChild(desImage);
                        }
                }
        }
}
drawMap();

/*
        Add the animation of the bird.
*/
var t1 = new TimelineLite();
var desx = init_x;
var desy = init_y;
var win = false;
function moveForward() {
        // console.log(dir);
        // console.log(desx);
        // console.log(desy);
        // console.log(mapmatrix[desx][desy]);
        var bird = document.getElementById("bird");
        if (dir === 1 && mapmatrix[desy][desx+1] != 0) {
                if (mapmatrix[desy][desx+1] === 3) {
                        var des = document.getElementById("des");
                        t1.add(TweenLite.to(des, 0.5,{autoAlpha:0, delay:0}));
                        win = true;
                }
                desx++;
                t1.add(TweenLite.to(bird, 0.5, {x:"+=50"}));
        } else if (dir === 2 && mapmatrix[desy+1][desx] != 0) {
                if (mapmatrix[desy+1][desx] === 3) {
                        var des = document.getElementById("des");
                        t1.add(TweenLite.to(des, 0.5,{autoAlpha:0, delay:0}));
                        win = true;
                }
                desy++;
                t1.add(TweenLite.to(bird, 0.5, {y:"+=50"}));
        }else if (dir === 3 && mapmatrix[desy][desx-1] != 0) {
                if (mapmatrix[desy][desx-1] === 3) {
                        var des = document.getElementById("des");
                        t1.add(TweenLite.to(des, 0.5,{autoAlpha:0, delay:0}));
                        win = true;
                }
                desx--;
                t1.add(TweenLite.to(bird, 0.5, {x:"-=50"}));
        }else if (dir === 0 && mapmatrix[desy-1][desx] != 0) {
                if (mapmatrix[desy-1][desx] === 3) {
                        var des = document.getElementById("des");
                        t1.add(TweenLite.to(des, 0.5,{autoAlpha:0, delay:0}));
                        win = true;
                }
                desy--;
                t1.add(TweenLite.to(bird, 0.5, {y:"-=50"}));
        } else {
                alert("Error");
        }
}

function moveRight() {
        dir = 1;
        var bird = document.getElementById("bird");
        //t1.add(TweenLite.to(bird,0.5,{rotation:-90, transformOrigin:"50%, 50%"}));
        moveForward();
}

function moveLeft() {
        dir = 3;
        var bird = document.getElementById("bird");
        //t1.add(TweenLite.to(bird,0.5,{rotation:-90, transformOrigin:"50%, 50%"}));
        moveForward();
}

function moveUp() {
        dir = 0;
        var bird = document.getElementById("bird");
        //t1.add(TweenLite.to(bird,0.5,{rotation:90, transformOrigin:"50%, 50%"}));
        moveForward();
}

function moveDown() {
        dir = 2;
        var bird = document.getElementById("bird");
        //t1.add(TweenLite.to(bird,0.5,{rotation:90, transformOrigin:"50%, 50%"}));
        moveForward();
}

var myInterpreter = null;

function runButtonClick() {
        Blockly.JavaScript.STATEMENT_PREFIX = 'highlightBlock(%1);\n';
        Blockly.JavaScript.addReservedWords('highlightBlock');
        var code = Blockly.JavaScript.workspaceToCode(workspace);
        console.log(code);
        Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
        try {
                alert(code);
                eval(code);
                setTimeout(check_win,3000);
        } catch (e) {
                alert(e);
        }
}

function highlightBlock(id) {
        workspace.highlightBlock(id);
}

function check_win(){
    if(win){
        var t = confirm("恭喜你通过本关，是否进行下一关？");
        if(t){
            window.location.href="course1-2-11.html";
        }
        
    }
    else
    {
        document.getElementById("hint").innerHTML = "继续编码！有些地方还不完全正确。尝试使用一个“向上走”、一个“向下走”和三个“向右走”的块";
    }
}

function reset() {
        dir = 1;
        desx = init_x;
        desy = init_y;
}

function stepButtonClick() {
        var code = Blockly.JavaScript.workspaceToCode(workspace);
        stepInterpreter = new Interpreter(code, initInterpreter);
        stepInterpreter.step();
}